<style scoped>
    .ivu-table td.demo-table-info-column {
        background-color: #2db7f5;
        color: #fff;
    }
</style>
<template>
    <div>
        <Card style="margin-bottom: 10px">
            <Form inline class="form-search">
                <FormItem>
                    <DatePicker style="width:150px" type="date" format="yyyy年MM月dd日" placeholder="开始日期" :clearable="false" v-model="sdate"></DatePicker>
                </FormItem>
                <FormItem>
                    <DatePicker style="width:150px" type="date" format="yyyy年MM月dd日" placeholder="结束日期" :clearable="false" v-model="edate"></DatePicker>
                </FormItem>
                <FormItem> </FormItem>

                <FormItem>
                    <Button type="primary" @click="
              page = 1;
              SearchSupplierPayLog();
            " icon="md-search">查询</Button>
                </FormItem>

            </Form>
        </Card>
        <Table ref="table" style="margin-bottom: 10px" border :loading="loadingTable" :columns="tableTitle" :data="tableData" :height="tableHeight"></Table>
        <Page :total="total" :current="page" :page-size="size" :page-size-opts="[10, 50, 100]" @on-change="
        (s) => {
          page = s;
          SearchSupplierPayLog();
        }
      " @on-page-size-change="
        (p) => {
          size = p;
          page = 1;
          SearchSupplierPayLog();
        }
      " show-total show-sizer />

    </div>
</template>

<script>
    import { SearchSupplierPayLog } from '@/api/supplier'
    export default {
        name: 'supplierpaylog',
        props: {
            Id: {
                type: String | Number,
                default: ''
            }
        },
        data() {
            return {
                sdate: '',
                edate: '',
                total: 0,
                page: 1,
                size: 50,
                tableHeight: 400,
                status: -1,
                keyword: '',
                loadingTable: false,
                Extras: {},
                tableTitle: [
                    {
                        type: 'index',
                        title: '序号',
                        align: 'center',
                        width: 60,
                        render: (h, params) => {
                            return h('span', params.index + (this.page - 1) * this.size + 1)
                        }
                    },
                    {
                        key: 'OrderDate',
                        title: '付款日期',
                        width: 160,
                        align: 'center',
                        render: (h, params) => {
                            return h('span', this.dayjs(params.row.OrderDate).format('YYYY年MM月DD日'))
                        }
                    },
                    {
                        key: 'OldAmount',
                        title: '原账目(元)',
                        width: 120,
                        align: 'center'
                    },
                    {
                        key: 'ChangeAmount',
                        title: '付款金额(元)',
                        width: 120,
                        align: 'center'
                    },
                    {
                        key: 'DiscountAmount',
                        title: '优惠金额(元)',
                        width: 120,
                        align: 'center'
                    },
                    {
                        key: 'NewAmount',
                        title: '付款后账目(元)',
                        width: 120,
                        align: 'center'
                    },

                    {
                        key: 'Remark',
                        title: '备注',
                        minWidth: 400,
                        align: 'center'
                    }

                ],
                tableData: []
            }
        },
        computed: {},

        methods: {

            SearchSupplierPayLog() {
                let vm = this
                vm.loadingTable = true

                if (typeof vm.sdate === 'object') {
                    vm.sdate = vm.dayjs(vm.sdate).format('YYYY年MM月DD日')
                }
                if (typeof vm.edate === 'object') {
                    vm.edate = vm.dayjs(vm.edate).format('YYYY年MM月DD日')
                }

                var reqData = {
                    sdate: vm.sdate,
                    edate: vm.edate,
                    supplierid: vm.Id,
                    page: vm.page,
                    size: vm.size
                }
                SearchSupplierPayLog(reqData).then((res) => {
                    vm.loadingTable = false
                    var data = res.data
                    if (data.StatusCode == 200) {
                        vm.tableData = data.Data.Items
                        vm.total = data.Data.TotalCount
                    } else {
                        vm.$Notice.error({
                            title: data.Errors
                        })
                    }
                })
            }
        },
        mounted() {
            this.sdate = this.dayjs().subtract(1, 'month').date(1).format('YYYY年MM月DD日')
            this.edate = this.dayjs().format('YYYY年MM月DD日')
            this.SearchSupplierPayLog()
        }
    }
</script>

<style>
</style>
